<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="child-view"></router-view>
      </keep-alive>
    </transition>
    <div v-if="$route.meta.NavShow">
      <tab-bar></tab-bar>
    </div>
  </div>
</template>

<script>
import TabBar from "./components/TabBar.vue";
import "vant/lib/index.css";

export default {
  name: "App",
  components: { TabBar },

  data() {
    return {
      transitionName: "slide-left",
    };
  },

  //监听路由的路径，可以通过不同的路径去选择不同的切换效果
  watch: {
    $route(to, from) {
      
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }

      if (to.query.id != from.query.id) {
        //加载数据
        // this.init();
      }
    },
  },
};
</script>
<style lang="scss">
@import "./assets/font/font.css";

:root {
  --bgcColor: #fbfbfb;
  --fontcolor: #aab1b5;
  --boxsizi: 1px 1px 10px 3px #eee;
}

#app {
  width: 100vw;
  background-color: #fbfbfb;
  font-family: "思源宋体";
  // 溢出显示滚动条
  // overflow: auto;
  // 隐藏滚动条
  // &::-webkit-scrollbar {
  //   display: none;
  //   /* Chrome Safari */
  // }
  .child-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: #fbfbfb;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  }
  .slide-left-enter,
  .slide-right-leave-active {
    opacity: 0;
    transform: translate(-30px, 0);
  }
  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0;
    transform: translate(-30px, 0);
  }
}
</style>
